<template>
	<div>
		<!--头部-->
		<div class="bi-top">
			<a href="#/"><img class="bi-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
			<p class="bipin">必买清单</p>
			<a><img class="bi-fan" src="../assets/img/gerenzhongxin/kefu/duo.png" alt="" /></a>
		</div>
			<!--妈咪宝贝-->
			<div class="bi-baby onebaby">
			<!--大图-->
			<div id="fan" class="bi-tbaby">
				<img src="../assets/img/shouye/muying/mu3.png" alt=""/>
				<p class="bi-fenzi">奶粉也要玩有机，养成健康北鼻</p>
			</div>
			<!--小图-->
			<div class="bi-hong">
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥59</p>
				</div>
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥129</p>
				</div>
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥88</p>
				</div>
			</div>
		</div>
			<!---->
		<div v-for="item in 10" class="bi-baby">
			<!--大图-->
			<div class="bi-tbaby">
				<img src="../assets/img/shouye/muying/mu3.png" alt=""/>
				<p class="bi-fenzi">奶粉也要玩有机，养成健康北鼻</p>
			</div>
			<!--小图-->
			<div class="bi-hong">
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥59</p>
				</div>
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥129</p>
				</div>
				<div class="bi-childHong">
					<img src="../assets/img/shouye/benzhou/9_5.png" alt=""/>
					<p class="bi-jieshao">诺优能幼儿配方奶粉</p>
					<p class="bi-jiage">￥88</p>
				</div>
			</div>
		</div>
		<!--点击回到顶部-->
		<a href="#fan">
			<div class="ding">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="fanding">返回顶部</p>
			</div>
		</a>
		<!--点击。。。出现下拉栏-->
		<ul class="xiala">
			<li class="xiaola"><img src="../assets/img/shouye/pinpai/xian.png" alt=""/>消息</li>
			<li class="xiaola"><img src="../assets/img/shouye/pinpai/xiaoshou.png" alt=""/>首页</li>
			<li class="xiaola"><img src="../assets/img/duanhuowang/fenxiang.png" alt=""/>分享</li>
			<li class="xiaola"><img src="../assets/img/shouye/tuijian/zhongqian.png" alt=""/>个人中心</li>
		</ul>
	</div>
</template>

<script>
	export default{
		methods : {
			xiao:function(){
				var dian = false;
				$(".bi-fan").click(function(){
					if (dian == true) {
						$(".xiala").css("display","block");
						dian = false;
					}else if (dian == false) {
						$(".xiala").css("display","none");
						dian = true;
					}
					
				})
			},
		},
		mounted:function(){
				this.xiao();
			}
	}
</script>

<style>
	.xiala{
		width: 15rem;
		height: 23rem;
		background: url(../assets/img/shouye/pinpai/yuanju.png) no-repeat;
		background-size: 100% 100%;
		z-index: 5;
		position: absolute;
		right:2rem;
		top:6rem;
		padding:3rem 0 3rem 1rem;
		display: none;
	}
	.xiaola{
		font-size: 2.4rem;
		color:#4d4d4d;
		padding:1rem 0;
	}
	.xiaola>img{
		width: 3rem;
		height: 3rem;
		padding-right: 2rem;
	}
	/*返回顶部*/
	.ding{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.ding>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.fanding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
	/**/
	.bi-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items:center;
		z-index: 5;
	}
	
	.bipin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 18rem;
		font-weight: 200;
	}
	
	.bi-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.bi-fan {
		width: 3.4rem;
		height: 0.9rem;
	}
		/*妈咪宝贝*/
	.bi-baby{
		width: 100%;
		padding-bottom: 8rem;
		background: #FFFFFF;
		margin-bottom: 2rem;
	}
	.bi-tbaby{
		width: 100%;
		height: 40.1rem;
		position: relative;
	}
	.bi-tbaby>img{
		width: 100%;
		height:100%;	
	}
	.bi-fenzi{
		width: 100%;
		height: 8rem;
		background: rgba(0,0,0,.5);
		line-height: 8rem;
		font-size: 3rem;
		text-align: center;
		color:white;
		font-weight: 200;
		position: absolute;
		left:0;
		bottom: 9.9rem;
	}
	/*奶粉*/
	.bi-hong {
		width: 100%;
		height: 25rem;
		text-align:center;
	}
	
	.bi-childHong {
		width: 22rem;
		height: 18rem;
		border: 0.01rem solid darkgray;
		float: left;
		margin-top: 2rem;
		margin-left: 1.5rem;
		box-sizing: border-box;
	}
	.bi-childHong>img {
		width: 14.3rem;
		height: 14.3rem;
		padding:2.3rem 3.8rem;
	}
	.bi-jieshao {
		font-size: 2.4rem;
		margin-bottom: 0.5rem;
		width: 15rem;
		padding-left:3.3rem;
		text-align: left;
	}
	
	.bi-jiage {
		font-size: 2.4rem;
		color: red;
	}
	.onebaby{
		margin-top: 9.6rem;
	}
</style>